<!--
 * @Author: GuoShuning
 * @Date: 2022-12-15 14:02:11
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-06 09:42:19
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./common/css/coommon.css" />
    <title>供应商列表</title>
    <style></style>
  </head>

  <body>
    <div class="supplierList" id="app">
      <div class="topBox itemBoxContent">
        <div class="itemBox_boxTitle">供应商列表</div>
        <div class="allSelect">
          <div class="leftSelect">
            <div class="itemSelect">
              <div class="input-group">
                <label>供应商名称</label>
                <input placeholder="输入关键字" />
              </div>
            </div>
            <div class="itemSelect">
              <div class="select-group">
                <label>供应商类型</label>
                <div class="options">
                  <input placeholder="输入关键字" />
                  <ul>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="itemSelect">
              <div class="select-group">
                <label>供应商等级</label>
                <div class="options">
                  <input placeholder="输入关键字" />
                  <ul>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="rightBtn">
            <button class="button_primary button_icon">
              <i class="bi bi-search btnIcon"></i>搜索
            </button>
            <button class="button_primary_plain button_icon">
              <i class="bi bi-arrow-clockwise btnIcon"></i>重置
            </button>
          </div>
        </div>
      </div>
      <div class="bottomBox itemBoxContent">
        <div class="tableTop">
          <div class="tableListCount">供应商总数 <span>12</span>个</div>
          <div class="tableTop_rightAction">
            <button class="button_icon button_error">
              <i class="bi bi-trash3"></i>删除
            </button>
            <button id="showEl" class="button_icon button_primary_plain">
              <i class="bi bi-plus-circle"></i>新增供应商
            </button>
            <button
              @click="onAdditionalMaterial"
              class="button_icon button_primary"
            >
              <i class="bi bi-plus-circle"></i>新增物料
            </button>
            <button @click="onSelectors" class="button_icon button_primary">
              选择人员
            </button>
          </div>
        </div>
        <div class="table">
          <div class="table-header">
            <div class="tr">
              <div class="td" style="width: 5%">序号</div>
              <div class="td center" style="width: 12%">供应商名称</div>
              <div class="td center" style="width: 12%">供应商类型</div>
              <div class="td center" style="width: 12%">供应商等级</div>
              <div class="td center" style="width: 12%">联系人</div>
              <div class="td center" style="width: 12%">联系方式</div>
              <div class="td center" style="width: 10%">状态</div>
              <div class="td" style="width: 17%">操作</div>
            </div>
          </div>
          <div class="table-body">
            <div class="tr">
              <div class="td" style="width: 5%">1</div>
              <div class="td center" style="width: 12%">供应商名称</div>
              <div class="td center" style="width: 12%">供应商类型</div>
              <div class="td center" style="width: 12%">供应商等级</div>
              <div class="td center" style="width: 12%">周校民</div>
              <div class="td center" style="width: 12%">17836833491</div>
              <div class="td center" style="width: 10%">状态</div>
              <div class="td" style="width: 17%">
                <button
                  class="button_success_text"
                  id="showSupplierViolationRecordBtn"
                >
                  违规记录
                </button>
                &ensp;
                <button class="button_warning_text" @click="showEditDialog">
                  编辑
                </button>
                &ensp;
                <button class="button_primary_text">查看</button>
                &ensp;
                <button class="button_error_text">删除</button>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <span>共 200 条</span>
          <ul>
            <li><i class="bi bi-chevron-left"></i></li>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>...</li>
            <li><i class="bi bi-chevron-right"></i></li>
          </ul>
        </div>
      </div>
      <!-- 新增供应商 -->
      <div id="dialog-content_supplierAdd">
        <iframe
          id="contract"
          src="./新增供应商.html"
          width="100%"
          height="100%"
          frameborder="0"
        ></iframe>
      </div>
      <!-- 违规记录 -->
      <div id="supplierViolationRecord">
        <iframe
          src="./违规记录.html"
          width="100%"
          height="100%"
          frameborder="0"
        ></iframe>
      </div>
      <!-- 新增物料 -->
      <div id="additionalMaterial" style="height: 60vh">
        <iframe
          id="additionalMaterialIframe"
          src="./新增物料.html"
          width="100%"
          height="100%"
          frameborder="0"
        ></iframe>
      </div>
      <div id="selectors" style="height: 60vh">
        <iframe
          id="selectorsIframe"
          src="./选择人员.html"
          width="100%"
          height="100%"
          frameborder="0"
        ></iframe>
      </div>
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script type="module">
    import DiaLog from "./common/js/diaLog.js";
    function getId() {
      return {
        id: 123,
      };
    }
    window.getId = getId;
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          total: 0,
          totalPage: 0,
          start: 0,
          end: 4,
          list: [],
          params: {
            page: 1,
            limit: 10,
          },
          editObj: {},
        };
      },
      //页面初始化加载
      mounted() {
        console.log("页面初始化加载");
        this.get();
      },
      //所有函数都写在这里
      methods: {
        onSelectors() {
          selectors.show();
        },
        onAdditionalMaterial() {
          additionalMaterial.show();
        },
        shang() {
          if (this.params.page > 1) this.params.page--;
          if (this.params.page < this.start + 1) {
            this.end -= 3;
            this.start -= 3;
          }
          this.get();
        },
        next() {
          if (this.params.page < this.totalPage) this.params.page++;
          if (this.params.page > this.end - 1) {
            this.end += 3;
            this.start += 3;
          }
          this.get();
        },
        onCurrentPage(page) {
          this.params.page = page;
        },
        changeProgress(type, index) {
          if (type == "add") {
            if (this.list[index].num != 100) {
              this.list[index].num += 1;
            }
          } else {
            if (this.list[index].num != 0) {
              this.list[index].num -= 1;
            }
          }
        },
        //接口
        get() {
          // ajax 请求
          // $.ajax()
          this.totalPage = 10; // 总页数
          this.total = 100; //总条数
          this.list = [
            {
              value: "吴恒",
              num: 80,
            },
          ];
        },
        showEditDialog() {
          dialog.show();
          const doc = window.parent.document.querySelector("#contract");
          doc.src = "{:url('item/suppliers.Suppliers/edit')}?id=123";
        },
      },
    }).mount("#app");
    let selectors = new DiaLog({
      title: "选择人员",
      width: "50% ",
      el: "#selectors",
      cancelText: "取消",
      confirmText: "确定",
      zIndex: 100,
      cancel: () => {
        console.log("取消");
        selectors.hide();
      },
      confirm: (document) => {
        // const contract =
        //   document.querySelector("#selectorsIframe").contentWindow;
        // console.log(contract);
        // let from = contract.save();
        // console.log(from);
        selectors.hide();
      },
    });
    selectors.show();
    // 新增供应商
    let dialog = new DiaLog({
      title: "新增供应商",
      width: "80% ",
      el: "#dialog-content_supplierAdd",
      cancelText: "取消",
      confirmText: "确定",
      zIndex: 100,
      cancel: () => {
        console.log("取消");
        dialog.hide();
      },
      confirm: (document) => {
        const contract = document.querySelector("#contract").contentWindow;
        console.log(contract);
        let from = contract.save();
        console.log(from);
        dialog.hide();
      },
    });
    showEl.addEventListener("click", () => {
      dialog.show();
    });
    // dialog.show();
    let showSupplierViolationRecordBtn = document.getElementById(
      "showSupplierViolationRecordBtn"
    );
    let supplierViolationRecordDialog = new DiaLog({
      title: "违规记录",
      width: "80% ",
      el: "#supplierViolationRecord",
      cancelText: "取消",
      confirmText: "保存",
      zIndex: 101,
      cancel: () => {
        console.log("取消");
        supplierViolationRecordDialog.hide();
      },
      confirm: (document) => {
        console.log("确定");
        supplierViolationRecordDialog.hide();
      },
    });
    showSupplierViolationRecordBtn.addEventListener("click", () => {
      supplierViolationRecordDialog.show();
    });

    // 新增物料
    let additionalMaterial = new DiaLog({
      title: "新增物料",
      width: "50% ",
      el: "#additionalMaterial",
      zIndex: 101,
      cancel: () => {
        additionalMaterial.hide();
      },
      confirm: (document) => {
        const win = document.querySelector(
          "#additionalMaterialIframe"
        ).contentWindow;
        console.log(win.save());
        additionalMaterial.hide();
      },
    });
    // additionalMaterial.show();
  </script>
</html>
